<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>会员登录</title>
    <style>
        /* 简单的页面样式，居中对齐表单 */
        body {
            font-family: Arial, sans-serif;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        /* 给容器一个上间距，以便从页面顶部留出空间 */
        .container {
            margin-top: 100px;
        }

        /* 表单整体布局设置为inline-block，让内容居中 */
        .login-box {
            display: inline-block;
            text-align: left;
            padding: 20px;
            border: 1px solid #ccc;
        }

        /* 标题字体加粗，并稍微加大字号 */
        h1 {
            font-size: 20px;
            font-weight: normal;
            margin-bottom: 20px;
            text-align: center;
        }

        /* 设置输入框的宽度和内间距 */
        input[type="text"],
        input[type="password"] {
            width: 200px;
            padding: 5px;
            margin-bottom: 10px;
        }

        /* 提交按钮的样式，使用浅蓝背景和白色文字 */
        .login-btn {
            width: 80px;
            padding: 5px;
            background-color: #3BB9FF;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .login-btn:hover {
            background-color: #2da6e6;
        }

        /* 在表单项的标签和输入框之间使用display:inline-block来控制间距 */
        .form-group {
            margin-bottom: 10px;
        }

        .form-group label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 5px;
        }

        /* 两周内自动登录的选项，文字颜色偏淡 */
        .auto-login {
            color: #999;
            font-size: 12px;
            white-space: nowrap;
            /* 禁止自动换行 */
        }

        /* 忘记密码链接距离登录按钮有一定间距 */
        .forgot-pass {
            margin-left: 10px;
            font-size: 12px;
        }

        /* 其他账户登录和注册链接的样式 */
        .other-login,
        .register {
            margin-top: 20px;
            font-size: 12px;
        }

        .other-login a,
        .register a {
            color: #333;
            text-decoration: none;
        }

        .other-login a:hover,
        .register a:hover {
            text-decoration: underline;
        }

        /* 展示其他账号登录的表情等icon可以使用Emoji或者图片代替 */
    </style>
</head>

<body>
    <div class="container">
        <!-- 登录容器 -->
        <div class="login-box">
            <!-- 标题：会员登录 -->
            <h1>会员登录</h1>

            <!-- 用户名输入行 -->
            <div class="form-group">
                <!-- "登录账号"标签，对应输入框为邮箱/id/手机号 -->
                <label for="username">登录账号</label>
                <!-- type="text" 用于用户名输入框，并提供提示文本 -->
                <input type="text" id="username" name="username" placeholder="邮箱/id/手机号">
            </div>

            <!-- 密码输入行 -->
            <div class="form-group" align="center">
                <!-- "密码"标签，对应密码输入框 -->
                <label for="password">密码</label>
                <!-- type="password" 用于密码输入框，输入的内容会显示为隐藏符号 -->
                <input type="password" id="password" name="password" placeholder="密码">
            </div>

            <!-- 自动登录选项（两周内自动登录） -->
            <div class="form-group">

                <input type="checkbox" id="auto-login" name="auto-login">
                <!-- 两周内自动登录的提示文字 -->
                <label for="auto-login" class="auto-login">两周内自动登录</label>
            </div>

            <!-- 登录操作行
            <div class="form-group" align="center">
                <button type="submit" class="login-btn">登 录</button>
                <a href="#" class="forgot-pass">忘记密码</a>
            </div> -->
            <center>
                <div class="form-group">
                    <button type="submit" class="login-btn">登 录</button>
                    <a href="#" class="forgot-pass">忘记密码</a>
                </div>
            </center>



            <div class="other-login">
                其他账号登录
                <!-- QQ图标及登录链接 (1.html同级目录下img文件夹中的ico1.png) -->
                <img src="ico1.png" alt="QQ图标"
                    style="vertical-align:middle; width:16px; height:16px; margin-right:5px;">
                <a href="#">QQ账号</a>

                <!-- 新浪微博图标及登录链接 (1.html同级目录下img文件夹中的ico2.png) -->
                <img src="ico2.png" alt="微博图标" style="vertical-align:middle; width:16px; height:16px; margin:0 5px;">
                <a href="#">新浪微博</a>

                <!-- 百度账号图标及登录链接 (1.html同级目录下img文件夹中的ico3.png) -->
                <img src="ico3.png" alt="百度图标" style="vertical-align:middle; width:16px; height:16px; margin:0 5px;">
                <a href="#">百度账号</a>
            </div>


            <!-- 注册提示，如果还不是会员可以立即注册 -->
            <div class="register">
                还不是会员？<a href="#">立即注册</a>
            </div>
        </div>
    </div>
</body>

</html>